<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>

<title>基礎情報</title>

<jsp:include page="../basePage/head.jsp" /> 
<style type="text/css">	
	#caseName{width:100px;}
	#rankID {width:100px}
	#dateField{width:120px} 
</style>
<script>
	 $(function() {		
		//设置默认日期 
		//开始日期：上个月 结束日期 当前日期
		var toDate = getCurrentDay();
		var fromDate =  getPriorMonthDay();
		
		//日期选择框格式化
 		$( "#dateFrom" ).datepicker({ dateFormat: 'yy-mm-dd'}).val(fromDate);;
		$( "#dateTo" ).datepicker({ dateFormat: 'yy-mm-dd'}).val(toDate);  	   
		
		//设置dateField
    	$("#dateField").multiselect({selectedList: 1,header:false, multiple: false,noneSelectedText:""}) ;
		//设置案件和工程下拉框
    	$("#caseName,#rankID").multiselect({checkAllText:'',uncheckAllText:'',selectedList: 10,noneSelectedText:""});
	 	
 		// 配置jqGrid组件  
		var $gridTable=$("#gridTable").jqGrid({  
         	//url: "baseInfoQuery.action",
         	datatype: "local",     
         	mtype: "GET",  
         	height: $("#container").height()-105,//$("#dataForm").height(),         	
         	autowidth: false,  
         	colNames: ["受信日付","納品日付","顧客","案件","帳票ID","帳票名称","項目ID","項目名称","ランク","枚数","正解枚数","錯誤枚数","対応時間","入力時間"],
        	colModel: [                                      
               	{name:"receiptDate",index:"receiptDate",width:120,sortable:true, sorttype: 'date', align:"center", resizable:true,formatter:'date', formatoptions:{newformat:"Y-m-d"}, frozen : false},  
               	{name:"oridReceiveDate",index:"oridReceiveDate",width:120,sortable:true, sorttype: 'date', align:"center", resizable:true,formatter:'date',formatoptions:{newformat:"Y-m-d"}, frozen : false}  ,
               	{name:"customerID",index:"customerID",width:120,sortable:true, align:"left", resizable:true, frozen : false},
               	{name:"caseName",index:"caseName",width:60,sortable:true, resizable:true, frozen : false},
               	{name:"formID",index:"formID",width:60,sortable:true, resizable:true, frozen : false},                
               	{name:"formName",index:"formName",width:300,sortable:true, resizable:false, resizable:true, frozen : false} ,               
               	{name:"categoryID",index:"categoryID",width:80,sortable:true, resizable:true, frozen : false} ,
               	{name:"categoryName",index:"categoryName",width:200,sortable:true, resizable:true, frozen : false} ,                
               	{name:"rankID",index:"rankID",width:40,sortable:true, align:"center", resizable:true, frozen : false} ,                
               	{name:"jobCount",index:"jobCount",width:80,sortable:true, sorttype: 'number', align:"right", resizable:true} ,
               	{name:"okCount",index:"okCount",width:60,sortable:true, sorttype: 'number', align:"right", resizable:true} ,
               	{name:"errorCount",index:"errorCount",width:60,sortable:true, sorttype: 'number', align:"right", resizable:true} ,
               	{name:"entryTime",index:"entryTime",width:80,sortable:true, sorttype: 'number', align:"right", resizable:true} ,
				{name:"inputTime",index:"inputTime",width:80,sortable:true, sorttype: 'number', align:"right", resizable:true} ,

         	],   
         	viewrecords: true,  
         	rowNum: 25,  
         	rowList: [25,50,100],  
         	loadonce: true,
         	jsonReader: {  
             	root:"gridModel",        
             	records: "record",      
             	repeatitems : false    
         	},  
         	pager: "#gridPager",  
         	caption: "基礎情報",           	
         	toolbar: [false,"top"] ,         
			rownumbers: true, 
			rownumWidth: 20,
			shrinkToFit: false 	 
     	});
 		
		//Frozen
 		$("th[role='columnheader']:eq(2)").find("span:first-child").first().after("<span id='lock' class='lock'></span>");
		$gridTable.jqGrid('destroyFrozenColumns')  	  		  	  
		.jqGrid('setColProp','receiptDate' , {frozen:true})
		.jqGrid('setColProp','oridReceiveDate' , {frozen:true})
  	  	.jqGrid('setFrozenColumns')
	  	.trigger('reloadGrid', [{current:true}]);		  	  		  		
  	  	
 		//Frozen
		//$gridTable.jqGrid('setFrozenColumns');  
		
      	//调用函数 显示 或者隐藏列
      	//函数位置 js/jqgridHideShowCols.js
      	//showHideColumn("gridTable",3);
      	$gridTable.jqGrid('navGrid','#gridPager',{add:false,edit:false,del:false,search:false,refresh:false});
      	$gridTable.jqGrid('navButtonAdd','#gridPager',{ caption: "",title: "列を表示／隠す",
      		onClickButton : function ()	{ jQuery("#gridTable").jqGrid('columnChooser'); }});
      	
 		
		$( "#buttonSearch" ).button().click(function( event ) {			 
			var data=$("#dataForm").serialize();
			$gridTable.jqGrid("setGridParam",{
				//url:"baseInfoQuery.action?"+ $("#dataForm").serialize(),		    		
				url:"baseInfoQuery!refreshGridModel.action?"+ $("#dataForm").serialize(),
				datatype:'json'
			}).trigger("reloadGrid", [{page:1}]);
			event.preventDefault();
		});
		 
	 	$("th[role='columnheader']").mouseenter(  function(){
 		 	var index = $(this).index();						
			$(".lock").remove();						 			 			
		  	$(this).find("span:first-child").first().after("<span id='lock' class='lock'></span>");
		  	$(this).find("#lock").click(function(){		  		
		  		var cm = $gridTable.jqGrid("getGridParam", "colModel");
		  		for(var i=0;i<cm.length;i++)
		  			$gridTable.jqGrid('setColProp',cm[i].name  , {frozen:false});
		  		$gridTable.jqGrid('destroyFrozenColumns');
		  	  	for(var i=1;i<=index;i++)		  	  
		  	  		$gridTable.jqGrid('setColProp',cm[i].name  , {frozen:true});
		  	  	$gridTable.jqGrid('setFrozenColumns')
		  	  		.trigger('reloadGrid', [{current:true}]);		  	  		  		
		  	});   
		}).mouseleave(function(){			
			$(".lock").remove();
	 		var lockcol=-1;
			$("th[role='columnheader']").find("#lock").remove();			
			var cm = $gridTable.jqGrid("getGridParam", "colModel");
			for(var i=0;i<cm.length;i++)
 				lockcol == cm[i].frozen == true ? i : lockcol;		   			 			
 			$("th[role='columnheader']:eq("+lockcol+")").find("span:first-child").first().after("<span id='lock' class='lock''></span>"); 
		});		 
		
		$(window).bind('resize', function() {	    	 	    	 
		 	$("#gridTable").setGridWidth($("#dataForm").width()-5);	    	 
		 	$("#gridTable").setGridHeight ($(window).height()-$("#dataForm").height()-91);	    	 
		}).trigger('resize');	
	});	 
</script>
</head>
<body style="font-size:15px;font-weight:400;margin: 0;padding:">
<s:form id="dataForm" theme="simple" >		
	<table style="white-space:nowrap">
		<tr>
			<th>案件</th><td ><s:select id="caseName" name="cases"  list="%{caseList}"  listKey="caseName" listValue="caseName"  multiple="true">  </s:select></td>									
			<th><label>ランク</label></th><td ><s:select id="rankID" name="ranks"  list="{'AB','C','D','E1','E2'}"   multiple="true">  </s:select></td>				
			<th>  時間</th><td ><s:select name="dateField" id="dateField" list="#{'receiptdate':'受信日付','oridreceivedate':'納品日付'}"    listKey="key" listValue="value"  multiple="true"></s:select></td>				
			<th>  時間帯</th><td ><s:textfield id="dateFrom" name="dateFrom" key="value" label="开始日" cssClass="datebox" /></td>				
			<th>  ～</th><td ><s:textfield id="dateTo" name="dateTo" key="value" label="结束日"  cssClass="datebox"/></td>
			<td width=30></td>
			<td><a href="#" id="buttonSearch" class="button">検索</a></td>
		</tr>
	</table>
</s:form>

<table id="gridTable" style="margin: 0;padding: 0"></table> 
<div id="gridPager" style="height:38px;margin: 0;padding: 0"></div>  	 

</body>
</html>